.container {
      margin: 20px 0;
      padding: 15px;
      background-color: #e8f4fd;
      border-radius: 8px;
    }
    
    .flex-container {
      display: flex;
      gap: 10px;
      background-color: white;
      padding: 15px;
      border-radius: 5px;
    }
    
    .flex-item {
      background-color: #FF6B6B;
      color: white;
      padding: 15px;
      border-radius: 5px;
      min-width: 60px;
      text-align: center;
    }
    
    .row { flex-direction: row; }
    .row-reverse { flex-direction: row-reverse; }
    .column { flex-direction: column; width: 200px; }
    .column-reverse { flex-direction: column-reverse; width: 200px; }
    ```
    html
    ```
    <div class="container">
    <h3>➡️ row（預設）</h3>
    <div class="flex-container row">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
    </div>
  </div>

  <div class="container">
    <h3>⬅️ row-reverse</h3>
    <div class="flex-container row-reverse">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
    </div>
  </div>

  <div class="container">
    <h3>⬇️ column</h3>
    <div class="flex-container column">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
    </div>
  </div>

  <div class="container">
    <h3>⬆️ column-reverse</h3>
    <div class="flex-container column-reverse">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
    </div>
  </div>